<template>
  <div class="app-container">
    <div class="table-container">
      <Form ref="formInline" :model="formInline" inline>
        <FormItem
          :prop="'teamMembers'"
          :rules="{ required: true, message: '请选择组员' }"
        >
          <Select
            v-model="formInline.teamMembers"
            filterable
            placeholder="组员筛选"
          >
            <Option v-for="(option, index) in groupList" :value="option.userId" :key="index">{{
              option.name
            }}</Option>
          </Select>
        </FormItem>
        <FormItem
          :prop="'dataTime'"
          :rules="{ required: true, message: '请选择月份' }"
        >
          <DatePicker
            v-model="formInline.dataTime"
            type="month"
            placeholder="月份筛选"
          ></DatePicker>
        </FormItem>
      </Form>
    </div>
    <div class="table-container">
      <div class="bottom">
        <div 
          class="image-item"
          v-for="(item, index) in imgList"
          :key="index"
          >
          <el-image 
            class="image" 
            :src="item.fileUrl" 
            fit="cover" 
            :preview-src-list="[].concat(item.fileUrl)"
          ></el-image>
          <p>{{item.thirdMaterial}}</p>
        </div>
      </div>
      <div class="btn">
        <Button :loading="isLoading" :disabled="!imgList.length" @click="download">点击下载</Button>
        <Button 
          style="margin-left: 10px;"
          :loading="isLoading" 
          :disabled="!formInline.dataTime" 
          @click="downloadAll"
        >下载全部</Button>
      </div>
    </div>
  </div>
</template>

<script>
import {getGroups, getGoodWorks, downLoadGoodWords} from '@/api/taskMange'
import format from "date-format";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      formInline: {
        teamMembers: "",
        dataTime: new Date(),
      },
      groupList: [],
      imgList: [],
      isLoading: false
    }
  },
  created() {
    this.getAllGroups()
  },
  methods: {
    // 下载某个人的作品
    async download() {
      this.isLoading = true
      try {
        const { data = ''} = await downLoadGoodWords(this.imgList)
        window.open(data, '_blank')
        this.isLoading = false
      } catch(err) {  
        return err
      }
    },

    // 根据权限下载作品
    downloadAll() {
      const Mount = new Date(this.formInline.dataTime || '').getMonth()
      const Year = new Date(this.formInline.dataTime || '').getFullYear()
      const startTime = format("yyyy-MM-dd", new Date(Year, Mount, 1))
      const endTime = format("yyyy-MM-dd", new Date(Year, Mount + 1, 0))
      const href = `${process.env.BASE_URL}/task/downGoodWordAll?startTime=${startTime}&endTime=${endTime}&userId=${this.userId}`
      window.open(href, '_blank')
    },

    async getAllGroups() {
      try {
        const { data = []} = await getGroups()
        this.groupList = data
      } catch(err) {
        return err
      }
    },

    // 获取个人优秀作品
    async getWorksExcallence() {
      const Mount = new Date(this.formInline.dataTime || '').getMonth()
      const Year = new Date(this.formInline.dataTime || '').getFullYear()
      try {
        const { data = []} = await getGoodWorks({
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0)),
          userId: this.formInline.teamMembers
        })
        this.imgList = data
      } catch(err) {
        return err
      }
    }
  },
  computed: {
    ...mapGetters(["userId"]),
  },

  watch: {
    formInline: {
      handler(data) {
        const valueList = Object.values(data)
        const result = valueList.every(item => item)
        if(result) {
          // 调用接口
          this.getWorksExcallence()
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.table-container {
  padding: 20px;
}
/deep/ .ivu-form {
  text-align: center;
}
/deep/ .ivu-btn[disabled], .ivu-btn, .ivu-btn.disabled:hover, .ivu-btn[disabled]:hover {
  background-color: #d01952;
  color: #fff;
}
.bottom {
  min-height: 220px;
  display: flex;
  .image-item {
    width: 20%;
    height: 200px;
    margin: 0 5px;
    .image {
      width: 100%;
      height: 100%;
    }
    p {
      text-align: center;
      color: #000;
    }
  }
}
.btn {
  margin: 40px 0;
  text-align: center;
}
/deep/ .ivu-btn-default {
  background-color: #d01952;
  color: #fff;
  width: 100px;
  border: none;
}
</style>
